<template>
    <el-card class="box-card">
        <el-button style="margin-bottom:20px" :icon="Plus" type="primary" :disabled="!categoryStore.category3Id"
            @click="addSpu">
            添加SPU</el-button>
        <el-table :data="spuInfo" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column prop="spuName" label="SPU名称" width="180" />
            <el-table-column prop="description" label="SPU描述">
            </el-table-column>
            <el-table-column label="操作" width="280">
                <template v-slot="{ row }">
                    <el-button title="添加SKU" type="primary" size="small" :icon="Plus" @click="addSku(row)"></el-button>
                    <el-button :icon="Edit" type="primary" size="small" title="修改属性" @click="open(row)" />
                    <el-button title="查看SKU列表" type="info" size="small" :icon="InfoFilled"></el-button>
                    <el-popconfirm :title="`确定删除${row.spuName}吗`" @confirm="deleteSpu(row.id)" confirm-button-text="确定"
                        cancel-button-text="取消">
                        <template #reference>
                            <el-button type="danger" size="small" :icon="Delete" title="删除SPU" />
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 6, 9, 12]"
            :small="small" :disabled="disabled" :background="background"
            layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'SpuList'
}
</script>
<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from 'vue'
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue'
import { useGetCategoryStore } from '@/stores/categoryList'
import { ElMessage } from 'element-plus'
import { reqGetSpuListData, reqDeleteSpuInfo } from '@/api/product/spu'
const categoryStore = useGetCategoryStore()

// 接收自定义事件
const emits = defineEmits(['setShowStatus', 'setCurrentSpu'])

const isForbiddenForm = ref<boolean>(true)


const currentPage = ref<number>(1)
const pageSize = ref<number>(6)
const total = ref(0)
const disabled = ref(false)
const background = ref(false)
const small = ref(false)

const spuInfo = ref([])


// 分页相关的两个事件
// 3. 更改每页显示条数时触发的事件处理程序
const handleSizeChange = (val: number) => {
    // val就是每页显示的条数 其实也相当于是pageSize
    pageSize.value = val
    currentPage.value = 1
    getSpuList()
}
// 4. 根据当前页码进行切换时触发的函数
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    currentPage.value = val
    getSpuList()
}

// 调用函数
const getSpuList = async () => {
    // 
    const result = await reqGetSpuListData({
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        category3Id: categoryStore.category3Id
    })

    spuInfo.value = result.records
    total.value = result.total

}

// 删除
const deleteSpu = async (id: number) => {
    await reqDeleteSpuInfo(id)
    ElMessage.success('SPU删除成功')
    getSpuList()
}
// 修改spu
const open = (row: any) => {
    emits('setShowStatus', 2)
    emits('setCurrentSpu', {
        ...row,
        spuImageList: [], // 跳转过去的数据覆盖了原本的，没有这两个数组，所以需要手动添加，并且请求渲染
        spuSaleAttrList: []
    })
}

// 点击跳转添加spu
const addSpu = () => {
    isForbiddenForm.value = false
    emits('setShowStatus', 2)
    emits('setCurrentSpu', [])

}

// 点击跳转添加sku
const addSku = (row: any) => {
    // console.log(row);
    emits('setShowStatus', 3)
    emits('setCurrentSpu', {
        ...row,
        spuImageList: [],
        spuSaleAttrList: [],
    })

}

// 监听三级导航
watch(() => categoryStore.category3Id, (id) => {
    if (!id) {
        spuInfo.value = [];
        currentPage.value = 1;
        pageSize.value = 3;
        total.value = 0;
        return
    }
    getSpuList()

}, { immediate: true })
</script>
<style>
</style>